import React from 'react'
import F from 'lodash/fp'
import {connect} from 'react-redux'
import {mapChange} from '../actions/content-change'

const MapSetting = props => {
    return (
        <div>  
            <span>宴席导航设置</span>
            <a className="edit-map-a"
                onClick={() => {
                    $('#modal-map').modal(
                        { closeViaDimmer: 0
                        , width: 955
                        , height: 570
                        , onConfirm: () => props.mapChange(window.MAP)
                        }
                    )
                }}>
                <i className="fa fa-map-marker "></i>
                <span>点击设置宴席导航位置</span>
            </a>
            { props.isReady
                ? <div className="map-l-wp">
                    <div className="map-t">
                        {props.text}
                    </div>
                    <div className="map-c">
                        <img src={props.mapSrc} width="248" height="166" />
                    </div>
                </div>
                : null
            }
        </div>  
    )
}

export default connect(
    ({global:{map}}) => {
        map = map ? map : {point: {lng: 0, lat: 0}, text: ''}
        let point = `${map.point.lng},${map.point.lat}`
        return {
            text: map.text,
            isReady: !!(map.point.lng && map.point.lat),
            mapSrc: `https://api.map.baidu.com/staticimage/v2?ak=ll6QejlPyspx35VS4B1ZTlPPZztIvoGC&width=248&height=166&markers=${point}&center=${point}`
        }
    },
    (dispatch, props) => ({
        mapChange: F.compose(dispatch, mapChange)
    })
)(MapSetting)